let num = 0;
const video = document.querySelector("video");

function scrollFn() {
  num = window.pageYOffset / 400;
  video.currentTime = num;
  window.requestAnimationFrame(scrollFn);
}

window.requestAnimationFrame(scrollFn);

function updateEvent(e) {
  let timer = e.target.currentTime;
  const introduce1 = document.querySelector(".introduce1");
  const introduce2 = document.querySelector(".introduce2");
  const introduce3 = document.querySelector(".introduce3");
  const introduce4 = document.querySelector(".introduce4");
  if (timer < 0.2) {
    introduce1.classList.add("active");
  } else {
    introduce1.classList.remove("active");
  }

  if (timer > 2 && timer < 3.2) {
    introduce2.classList.add("active");
  } else {
    introduce2.classList.remove("active");
  }

  if (timer > 4 && timer < 4.8) {
    introduce3.classList.add("active");
  } else {
    introduce3.classList.remove("active");
  }

  if (timer > 4.8) {
    introduce4.classList.add("active");
  } else {
    introduce4.classList.remove("active");
  }
}

window.addEventListener("scroll", () => {
  video.addEventListener("timeupdate", updateEvent);
});

let top1 = 0;
let top2 = 0;
let timeout = null; // 定时器

// scroll监听
document.onscroll = () => {
  clearTimeout(timeout);
  timeout = setTimeout(stopScroll, 500);
  top1 = document.documentElement.scrollTop || document.body.scrollTop;
};

function stopScroll() {
  top2 = document.documentElement.scrollTop || document.body.scrollTop;
  if (top2 == top1) {
    video.removeEventListener("timeupdate", updateEvent);
  }
}
